<template>
	<view class="chartsBox">
		<view class="chartsTitle">
			<h4>季目标达成</h4>
		</view>


		<uni-data-select :clear="false" class="uniDataSelect" v-model="selectValue" :localdata="selectRange"
			@change="selectChange"></uni-data-select>




		<view class="achievementInfo">
			<text class="orangeColor" style="font-size: 36rpx;font-weight: bold;">{{reachAch}}</text>元
		</view>

		<view class="compare">
			<text v-if="!(ringBasis == 0)" style="margin-right: 10rpx;">
				<text>环比</text>
				<text :style="{ color: ringBasis > 0 ? 'green' : 'red' }">{{ringBasis}}%</text>
			</text>
			
			<text v-if="!(basis == 0)">
				<text>同比</text>
				<text :style="{ color: basis > 0 ? 'green' : 'red' }">{{basis}}%</text>
			</text>



		</view>


		<view class="chartsMain">
			<view class="charts-box">
				<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" ref="chartRef" />

			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import {
		homeGetQuarterKpiSta
	} from '../../../utils/data';
	
	import {onShow} from '@dcloudio/uni-app'
	

	//====================下拉框========================//
	let selectValue = ref('')

	//获取当前季度
	const now = new Date();
	const currentMonth = now.getMonth() + 1;
	if (currentMonth >= 1 && currentMonth <= 3) {
		selectValue.value = '1';
	} else if (currentMonth >= 4 && currentMonth <= 6) {
		selectValue.value = '2';
	} else if (currentMonth >= 7 && currentMonth <= 9) {
		selectValue.value = '3';
	} else if (currentMonth >= 10 && currentMonth <= 12) {
		selectValue.value = '4';
	}

	let selectRange = ref([{
			value: '1',
			text: "第一季度",
		},
		{
			value: '2',
			text: "第二季度",
		},
		{
			value: '3',
			text: "第三季度",
		},
		{
			value: '4',
			text: "第四季度",
		}
	])

	let selectChange = (e) => {
		getServerData()
	}





	// =============================获取图表实例============================//
	const chartRef = ref(null)

	let chartData = ref({
		// categories: [],
		series: []
	});

	let opts = reactive({
		timing: "easeOut",
		duration: 1000,
		rotate: false,
		rotateLock: false,
		color: ["#00c2ff"],
		padding: undefined,
		fontSize: 13,
		fontColor: "#666666",
		dataLabel: true,
		dataPointShape: true,
		dataPointShapeType: "solid",
		touchMoveLimit: 60,
		enableScroll: false,
		enableMarkLine: false,
		title: {
			name: "68%",
			fontSize: 20,
			color: "#000000",
			offsetX: 0,
			offsetY: -13
		},
		subtitle: {
			name: "",
			fontSize: 15,
			color: "#000000",
			offsetX: 0,
			offsetY: 0
		},
		extra: {
			arcbar: {
				type: "default",
				width: 7,
				backgroundColor: "#E9E9E9",
				startAngle: 1,
				endAngle: 0,
				gap: 2,
				direction: "cw",
				lineCap: "round",
				centerX: 0,
				centerY: 95,
				linearType: "custom",
				customColor: ['#1890FF']
			}
		}
	})

	//达成业绩
	const reachAch = ref();
	//达成率
	const reachRate = ref();
	//同比
	const basis = ref();
	//环比
	const ringBasis = ref();

	let getServerData = () => {
		//获取登录账号的businessId
		let userinfo = JSON.parse(uni.getStorageSync('userinfo'))
		let businessId = userinfo.businessId
		homeGetQuarterKpiSta('/home/getQuarterKpiSta', {
			businessId: businessId,
			quarter: selectValue.value
		}).then((res) => {
			if (res.code == 200) {

				reachAch.value = res.data.reachAch
				reachRate.value = res.data.reachRate / 100
				basis.value = res.data.basis
				ringBasis.value = res.data.ringBasis


				let result = {

					series: [{
						name: "达成率",
						data: +reachRate.value > 1 ? 1 : reachRate.value,

					}]
				};

				chartData.value = JSON.parse(JSON.stringify(result));

				opts.title.name = res.data.reachRate + '%'

			}
		})


	}

	// onMounted(() => {
	// 	getServerData()
	// })
	onShow(()=>{
		//获取当前季度
		const now = new Date();
		const currentMonth = now.getMonth() + 1;
		if (currentMonth >= 1 && currentMonth <= 3) {
			selectValue.value = '1';
		} else if (currentMonth >= 4 && currentMonth <= 6) {
			selectValue.value = '2';
		} else if (currentMonth >= 7 && currentMonth <= 9) {
			selectValue.value = '3';
		} else if (currentMonth >= 10 && currentMonth <= 12) {
			selectValue.value = '4';
		}
		
		getServerData()
	})
</script>

<style scoped lang="scss">
	.chartsBox {
		width: 337rpx;
		// height: 515rpx;
		padding: 18rpx;
		background: white;
		margin: 14rpx 0;

		.chartsTitle {
			width: 100%;
			height: 46rpx;
			margin-bottom: 14rpx;
		}



		.uniDataSelect {
			margin-bottom: 6rpx;
		}

		.achievementInfo {
			font-size: 24rpx;
		}

		.compare {
			font-size: 24rpx;
			height: 34rpx;
		}

		.chartsMain {
			width: 100%;
			height: 250rpx;

			// background-color: #bfa;
			/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
			.charts-box {
				width: 100%;
				height: 100%;
			}

		}
	}

	.orangeColor {
		color: #FF8F38;
	}
</style>